<template>
    <div class="div1">
        <!-- 搜索栏 -->
        <el-card class="box-card" id="search">
            <el-row>
                <el-col :span="20">
                    <el-input v-model="searchModel.username" placeholder="用户名" clearable></el-input>
                    <el-input v-model="searchModel.phone" placeholder="用户电话" clearable></el-input>
                    <el-button @click="getUserList" type="primary" round icon="el-icon-search">查询</el-button>
                </el-col>
                <el-col :span="4" align="right">
                    <el-button @click="openEditUi(null)" type="primary" icon="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>
        </el-card>
        <!-- 查询结果栏 -->
        <el-card>
            <el-table :data="userList" style="width: 100%" height="300px">
                <el-table-column fixed label="#" width="150">
                    <template slot-scope="scope">
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                    <!--  {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}} -->
                </el-table-column>
                <el-table-column prop="id" label="用户ID" width="120">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="120">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="status" label="用户状态" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1">正常</el-tag>
                        <el-tag v-else type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click="openEditUi(scope.row.id)" type="primary" icon="el-icon-edit" size="mini"
                            circle></el-button>
                        <el-button @click="deleteuser(scope.row)" type="danger" icon="el-icon-delete" size="mini"
                            circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchModel.pageNo" :page-sizes="[5, 10, 20, 50]" :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 用户信息编辑对话框 -->
        <el-dialog @close="clearform" :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="userForm" ref="userFromRef" :rules="rules">
                <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                    <el-input v-model="userForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-if="userForm.id == null || userForm.id == undefined" label="用户密码" prop="password"
                    :label-width="formLabelWidth">
                    <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="userForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户状态" :label-width="formLabelWidth">
                    <el-switch v-model="userForm.status" :active-value="1" :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="电子邮件" prop="email" :label-width="formLabelWidth">
                    <el-input v-model="userForm.email" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import userApi from '@/api/userManage'
export default {
    data() {
        var checkEmail = (rule, value, callback) => {
            var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
            if (!reg.test(value)) {
                return callback(new Error('邮箱格式错误'));
            }
            callback();
        };
        return {
            formLabelWidth: '130px',
            userForm: {},
            dialogFormVisible: false,
            title: "",
            total: 0,
            searchModel: {
                pageNo: 1,
                pageSize: 10,
            },
            userList: [],
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入用户初始密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入用户电子邮箱', trigger: 'blur' },
                    { validator: checkEmail, trigger: 'blur' }

                ],
            }
        };
    },
    methods: {
        deleteuser(user) {
            this.$confirm(`您确定要删除用户${user.username}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                userApi.deleteById(user.id).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    });
                    this.getUserList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        saveUser() {
            //触发表单验证
            this.$refs.userFromRef.validate((valid) => {
                if (valid) {
                    //提交请求到后台
                    userApi.saveUser(this.userForm).then(response => {
                        //成功提交的提示
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        //关闭对话框
                        this.dialogFormVisible = false;
                        //刷新数据
                        this.getUserList();
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        clearform() {
            this.userForm = {};
            this.$refs.userFromRef.clearValidate();
        },
        openEditUi(id) {
            if (id == null) {
                this.title = '新增用户';
            } else {
                this.title = '修改用户';
                //根据id查数据
                userApi.getUserById(id).then(response => {
                    this.userForm = response.data;
                })
            }
            this.dialogFormVisible = true;

        },
        handleSizeChange(pageSize) {
            this.searchModel.pageSize = pageSize;
            this.getUserList();
        },
        handleCurrentChange(pageNo) {
            this.searchModel.pageNo = pageNo;
            this.getUserList();
        },
        getUserList() {
            userApi.getUserList(this.searchModel).then(response => {
                this.userList = response.data.rows;
                this.total = response.data.total;
            });

        }
    },
    created() {
        this.getUserList();
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 1000px;
}

#search .el-input {
    width: 200px;
    margin-right: 10px;
}

.el-dialog .el-input {
    width: 200px;

}
</style>